<template>
	<div id="app">
    <form @submit.prevent="insArray">
      <input type="text" v-model="fruit">
      <button>添加</button>
    </form>
    <ul v-for="(item,index) of array" :key="index">
      <li>
        <span>{{item}}</span>
        <button @click="delArray(index)">删除</button>
        <button @click="upArray(index)">修改</button>
        <input  ref="item" type="text" :value="item">
      </li>
    </ul>
    
	</div>
</template>
<script>
import axios from "axios";
export default {
  data(){
    return{
      fruit:"",
      array:[]
    }
  },
  methods:{
    getArray(){
      axios.get("http://127.0.0.1:3000/")
      .then(res => {
        this.array=res.data;
      })
      .catch(err => {
        console.error(err); 
      })
    },
    insArray(){
      axios.post("http://127.0.0.1:3000/",{fruit:this.fruit})
      .then(res => {
        this.getArray();
        console.log(res.data);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    delArray(index){
      axios.delete(`http://127.0.0.1:3000/${index}`)
      .then(res => {
        this.getArray();
        console.log(res.data);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    upArray(index){
      axios.put(`http://127.0.0.1:3000/${index}`,{item:this.$refs.item[index].value})
      .then(res => {
        this.getArray();
        console.log(res.data);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    // upValue(index){
    //   let values=this.value;
    //   console.log(index+"values"+values);
    // }
  },
  mounted(){
    this.getArray();
  }
};
</script>
<style>
</style>